<template>
  <el-form label-position="top" class="p-10">
    <div class="title">图标标题</div>
    <div class="box">
      <div class="flex" v-for="(item, index) in activeData.extConfig.titlesList" :key="index">
        <el-form-item label="图标地址" style="margin-right: 10px">
          <el-input v-model="item.url"></el-input>
        </el-form-item>
        <el-form-item label="标题名称">
          <el-input v-model="item.title"></el-input>
        </el-form-item>
        <div @click="titlesDel(index)" class="titlesDelete">
          <i class="el-icon-delete"></i>
        </div>
      </div>
      <div class="titlesAdd" @click="titlesAdd">
        <i class="el-icon-circle-plus-outline"></i>
        增加数据
      </div>
    </div>
    <el-form-item label="内边距(padding)">
      <div style="padding: 0 20px">
        <div style="width: 100%">
          <div style="text-align: center">
            <el-input
              v-model="activeData.extConfig.titlesPaddingTop"
              style="width: 70px"
            ></el-input>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between">
          <el-input
            v-model="activeData.extConfig.titlesPaddingLeft"
            style="width: 70px"
          ></el-input>
          <el-input
            v-model="activeData.extConfig.titlesPaddingRight"
            style="width: 70px"
          ></el-input>
        </div>
        <div style="width: 100%">
          <div style="text-align: center">
            <el-input
              v-model="activeData.extConfig.titlesPaddingBottom"
              style="width: 70px"
            ></el-input>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="外边距(margin)">
      <div style="padding: 0 20px">
        <div style="width: 100%">
          <div style="text-align: center">
            <el-input
              v-model="activeData.extConfig.titlesMarginTop"
              style="width: 70px"
            ></el-input>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between">
          <el-input
            v-model="activeData.extConfig.titlesMarginLeft"
            style="width: 70px"
          ></el-input>
          <el-input
            v-model="activeData.extConfig.titlesMarginRight"
            style="width: 70px"
          ></el-input>
        </div>
        <div style="width: 100%">
          <div style="text-align: center">
            <el-input
              v-model="activeData.extConfig.titlesMarginBottom"
              style="width: 70px"
            ></el-input>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="对齐方式">
      <el-select
        v-model="activeData.extConfig.titlesAlign"
        placeholder="请选择"
      >
        <el-option
          v-for="item in strAlignOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <!-- <el-form-item label="素材库图标">
          <el-input v-model="activeData.extConfig.daima" ></el-input>
        </el-form-item> -->
    <el-form-item label="图标大小" style="width: 180px">
      <el-input
        v-model="activeData.extConfig.titlesIcon"
        label="描述文字"
      ></el-input>
    </el-form-item>
    <el-form-item label="图标与文字距离" style="width: 180px">
      <el-input
        v-model="activeData.extConfig.iconText"
        label="描述文字"
      ></el-input>
    </el-form-item>
    <el-form-item label="自定义数列" style="width: 180px">
      <el-input
        v-model="activeData.extConfig.titlesColumn"
        label="描述文字"
      ></el-input>
    </el-form-item>
    <el-form-item label="格子之间的距离(移动端)" style="width: 180px">
      <el-input
        v-model="activeData.extConfig.titlesGutter"
        label="描述文字"
      ></el-input>
    </el-form-item>
    <el-form-item label="字体大小">
      <el-input-number
        v-model="activeData.extConfig.titlesSize"
        :min="1"
        :max="32"
        label="描述文字"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="圆角">
      <el-input-number
        v-model="activeData.extConfig.titlesRadius"
        :min="1"
        :max="100"
        label="描述文字"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="字体粗细">
      <el-switch v-model="activeData.extConfig.titlesWeight" />
    </el-form-item>
    <el-form-item label="是否显示图标">
      <el-switch v-model="activeData.extConfig.showIcon" />
    </el-form-item>
    <el-form-item label="是否竖向排版">
      <el-switch v-model="activeData.extConfig.isColumn" />
    </el-form-item>
    <el-form-item label="是否显示移动端边框">
      <el-switch v-model="activeData.extConfig.titlesBorder" />
    </el-form-item>
    <el-form-item label="字体颜色">
      <div class="block">
        <el-color-picker
          v-model="activeData.extConfig.titlesColor"
        ></el-color-picker>
      </div>
    </el-form-item>
    <el-form-item label="背景色">
      <div class="block">
        <el-color-picker
          v-model="activeData.extConfig.titlesBgColor"
        ></el-color-picker>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "iconTitles-config",
  props: ["activeData"],
  data() {
    return {
      strAlignOptions: [
        {
          value: "center",
          label: "居中",
        },
        {
          value: "left",
          label: "居左",
        },
        {
          value: "right",
          label: "居右",
        },
      ],
      titlesList: [
        {
          url: "",
          title: "",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    titlesAdd() {
      this.activeData.extConfig.titlesList.push({
        url: "",
        title: "",
      });
    },
    titlesDel(index) {
      this.activeData.extConfig.titlesList.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
// .el-input {
//   display: block;
//   width: 182px;
// }
// .el-textarea__inner {
//   width: 55%;
// }
.flex {
  display: flex;
  padding: 10px 10px 0 10px;
}
.box:hover {
  background-color: #efefef;
}
.box {
  padding-bottom: 10px;
  border-top: 1.5px solid #efefef;
  border-bottom: 1.5px solid #efefef;
}
.titlesAdd {
  margin-left: 10px;
  color: #409eff;
  font-weight: 500;
  font-size: 10px;
  cursor: pointer;
}
.title {
  font-weight: 500;
  font-size: 14px;
  color: #5a5959;
}
.titlesDelete {
  cursor: pointer;
}
</style>

